<template>
    <div class="container">
        <div class="row">
            <div class="col-4">
                <div class="card align-items-center">
                    <div class="card-body">
                        <input type="text" v-model="carItem.id" disabled="false"><br>
                        <input type="text" v-model="carItem.name"><br>
                        <input type="text" v-model="carItem.price"><br>
                        <button @click="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()

const carItem = ref({
    id: route.query.id,
    name: route.query.name,
    price: route.query.price
})
const submit = e => {
    console.log();
    router.push({
        path: '/',
        query: {
            carItemId: carItem.value.id,
            carItemName: carItem.value.name,
            carItemPrice: carItem.value.price
        }
    })
}


</script>

<style lang="scss" scoped></style>